<template>
<div>
  <div v-if="!isSettingDetail" class="mod-config" >
    <div class="div-e">
      <el-table
        ref="multipleTable"
        class="limitTooltipWidth"
        :data="tableData"
        :max-height="table.tableHeight"
        :header-cell-style="{background:'#F5F7FA'}"
        :default-sort = "{prop: 'orderId', order: 'descending'}"
        style="width: 100%;padding-top: 15px"
        v-loading="dataListLoading">
        <el-table-column
          label="名称"
          width="200px"
          prop="name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="参数配置"
          prop="dictNames"
          align="center"
        ></el-table-column>
        <el-table-column
          width="150px"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="clickSetting(scope.row)">设置</el-button>
            <el-button type="text" size="mini" @click="showAddOrUpdateDialog(true,scope.row)">新增</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div v-else class="mod-config" id="mod-config-id">
    <div class="div-s" id="div-s-id">
      <el-form :model="params" ref="paramsFormRefs"  label-width="70px" inline class="queryFormed">
        <el-row class="row-s">
          <el-col class="col-center" :span="6">
            <el-form-item label="名称">
              <el-input v-model="params.name" placeholder="请输入姓名" clearable @clear="clickSearch"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="col-right" :span="6" :offset="12">
            <el-form-item class="item-all">
              <el-button class="buttonItem" size="mini" plain @click="clickReset()">重 置</el-button>
              <el-button class="buttonItem" size="mini" type="primary" @click="clickSearch()">搜 索</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <div class="div-e" id="div-e-id">
      <div class="div-inquire" id="div-inquire-id">
        <div class="in-t">
          <div class="in-ts"></div>
          <h3>企业数据配置</h3>
        </div>
        <div  class="div-button">
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="showAddOrUpdateDialog(true)">新增</el-button>
          <el-button size="mini"   @click="turnToSetting" plain>返回</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :max-height="table.tableHeight"
        :header-cell-style="{background:'#F5F7FA'}"
        :default-sort = "{prop: 'orderId', order: 'descending'}"
        style="width: 100%"
        v-loading="dataListLoading">
        <el-table-column
          label="名称"
          prop="name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="排序"
          prop="orderId"
          align="center"
          sortable
        ></el-table-column>
        <el-table-column
          label="状态码"
          prop="statusId"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.statusId === 1">正常</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" align="center" >
        </el-table-column>
        <el-table-column
          label="操作"
          prop=""
          align="center"
        >
          <template slot-scope="scope">
            <el-button v-if="scope.row.statusId === 2" type="text" size="mini" @click="clickTurnOn(scope.row)">启用</el-button>
            <el-button v-else type="text" class="warning-color" size="mini" @click="clickTurnOff(scope.row)">禁用</el-button>
            <el-button type="text" size="mini" @click="showAddOrUpdateDialog(false,scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="changePageSize"
        @current-change="turnToPage"
        :current-page="queryInfo.pageIndex"
        :page-sizes="[5, 10, 20, 50, 100, 200]"
        :page-size="queryInfo.pageSize "
        layout="total, prev, pager, next, sizes, jumper"
        :total="totalPage"
        id="div-e-paging-id">
      </el-pagination>
    </div>
  </div>
  <el-dialog
    title=""
    :visible.sync="addOrUpdateDialogVisible"
    width="30%">
    <h3 slot="title">{{isAdd ? '新增' : '修改'}}</h3>
    <el-form v-model="addOrUpdateForm" rules="addOrUpdateFormRules" ref="addOrUpdateFormRefs" label-width="70px">
      <el-form-item label="名称" required>
        <el-input v-model="addOrUpdateForm.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="addOrUpdateForm.orderId" placeholder="请输入排序号" type="number" :min="1" :step="1"></el-input>
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="addOrUpdateForm.remark"
                  placeholder="备注"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="addOrUpdateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="clickConfirm">保 存</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
import BasePaging from '../../common/BasePaging'
import {
  dataSettingPaging, getDictSettingList,
  saveDictValue,
  turnOffDictValue,
  turnOnDictValue,
  updateDictValue
} from '../../../api/customer/dataSetting'

export default {
  name: 'data-setting',
  extends: BasePaging,
  data () {
    return {
      params: {
        name: ''
      },
      addOrUpdateForm: {
        name: '',
        orderId: 1,
        remark: '',
        id: '',
        dictCode: 'incomeAccount',
        value: null,
        statusId: null
      },
      isSettingDetail: false,
      addOrUpdateDialogVisible: false,
      dataListLoading: false,
      isAdd: false,
      tableData: []
    }
  },
  methods: {
    paging () {
      if (this.isSettingDetail) {
        let _conditions = {}
        _conditions['name'] = this.params.name
        _conditions['dictCode'] = this.addOrUpdateForm.dictCode
        this.dataListLoading = true
        dataSettingPaging({
          conditions: _conditions,
          inOrder: '',
          orderBy: '',
          pageNum: this.queryInfo.pageIndex,
          pageSize: this.queryInfo.pageSize
        }, ({data}) => {
          this.tableData = data.records
          this.totalPage = data.total
          this.dataListLoading = false
        }, () => {
          this.dataListLoading = false
        })
      } else {
        getDictSettingList(({data}) => { this.tableData = data })
      }
    },
    initParams () {
      this.params.name = ''
    },
    clickReset () {
      this.initParams()
      this.clickSearch()
    },
    clickTurnOn (row) {
      let idList = [row.id]
      turnOnDictValue(idList, () => { this.paging() })
    },
    clickTurnOff (row) {
      let idList = [row.id]
      turnOffDictValue(idList, () => { this.paging() })
    },
    initAddOrUpdateForm () {
      this.addOrUpdateForm['name'] = ''
      this.addOrUpdateForm['orderId'] = 1
      this.addOrUpdateForm['remark'] = ''
      this.addOrUpdateForm['id'] = ''
      this.addOrUpdateForm['value'] = null
      this.addOrUpdateForm['statusId'] = null
    },
    showAddOrUpdateDialog (isAdd, row = null) {
      this.isAdd = isAdd
      if (row) {
        this.addOrUpdateForm['dictCode'] = row.dictCode
      }
      if (isAdd) {
        this.initAddOrUpdateForm()
        this.addOrUpdateDialogVisible = true
      } else {
        this.addOrUpdateForm['name'] = row.name
        this.addOrUpdateForm['orderId'] = row.orderId
        this.addOrUpdateForm['remark'] = row.remark
        this.addOrUpdateForm['id'] = row.id
        this.addOrUpdateForm['statusId'] = row.statusId
        this.addOrUpdateForm['value'] = row.value
        this.addOrUpdateDialogVisible = true
      }
    },
    updateDictReq () {
      updateDictValue(this.addOrUpdateForm, () => { this.paging() })
      this.addOrUpdateDialogVisible = false
      this.initAddOrUpdateForm()
    },
    saveDictReq () {
      saveDictValue(this.addOrUpdateForm, () => { this.paging() })
      this.addOrUpdateDialogVisible = false
      this.initAddOrUpdateForm()
    },
    clickConfirm () {
      if (this.isAdd) {
        this.saveDictReq()
      } else {
        this.updateDictReq()
      }
    },
    turnToSetting () {
      this.isSettingDetail = false
      this.paging()
    },
    turnToSettingDetail () {
      this.isSettingDetail = true
      this.paging()
    },
    clickSetting (row) {
      this.addOrUpdateForm.dictCode = row.dictCode
      this.turnToSettingDetail()
    }
  }
}
</script>
